<template>
  <div class="home">
    <div class="home_header_container">美团外卖</div>
    <div class="home_main_container">
      <!-- 左侧边栏 -->
      <div class="home_main_left">
        <div :class="active === index?'left_slider_item_active':'left_slider_item'" 
        v-for="(item,index) in category" :key="index"
        @click="OnActive(index)">{{item.cname}}</div>
      </div>
      <!-- 右边二级分类 -->
      <div class="home_main_right" ref="right"
      @touchstart="OnTouchStart">
        <div class="right_block_container" 
        v-for="(item,index) in category" :key="index"
        ref="block">
            <div class="right_block_header">{{item.cname}}</div>
            <div class="right_items_container">
              <div class="right_block_item" 
              v-for="(ele,num) in category[index].subcategories" :key="num">
                <img :src="ele.scpic" alt="">
                <div class="right_block_message">
                  <div>{{ele.subcname}}</div>
                  <div class="right_block_price">￥{{ele.price}}.00</div>
                  <div class="right_block_to_cart" 
                  @click="AddCart(ele)">+</div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
    <!-- 购物车弹出 -->
    <van-action-sheet v-model="show">
      <div class="content">
        <div class="content_wrapper">
          <div class="cart_item_container" 
          v-for="(item,index) in cartItems" :key="index">
            <div class="cart_item_name">{{item.subcname}}</div>
            <div class="cart_item_price">￥{{item.price}}</div>
            <div class="cart_item_count">
              <div @click="OnMinus(item)">-</div>
              <div class="count">{{item.count}}</div>
              <div @click="OnPlus(item)">+</div>
            </div>
          </div>
        </div>
        <!-- 购物车下边 -->
        <div class="home_bottom">
          <div class="cart_button" @click="OnCart">
            <van-icon name="shopping-cart-o" size="40px" :badge="totalCount"/>
          </div>
          <div class="total_price">￥{{totalPrice}}</div>
          <div class="and_price">去结算</div>
        </div>
      </div>
    </van-action-sheet>
    <!-- 下面计算总价展示栏 -->
    <div class="home_bottom">
      <div class="cart_button" @click="OnCart">
        <van-icon name="shopping-cart-o" size="40px" :badge="totalCount"/>
      </div>
      <div class="total_price">￥{{totalPrice}}</div>
      <div class="and_price">去结算</div>
    </div>
  </div>
</template>

<script>
// import axios from 'axios';

export default {
  name: 'Home',
  components: {
  },
  data(){
    return {
      cartItems:[],
      show:false
    }
  },
  computed:{
    category(){
      return this.$store.state.category
    },
    active(){
      return this.$store.state.active
    },
    totalPrice(){
      var tempPrice = 0
        this.cartItems.forEach((ele)=>{
          tempPrice += ele.price * ele.count
        })
      return tempPrice
    },
    totalCount(){
      var tempCount = 0
        this.cartItems.forEach((ele)=>{
          tempCount += ele.count
        })
      return tempCount
    }

  },
  methods:{
    OnActive(index){
        this.$store.dispatch('CHANGE_ACTIVE',index)
        var Element = this.$refs.block[this.active]
        Element.scrollIntoView({behavior:"smooth"})
        this.$refs.right.removeEventListener('scroll',this.OnScroll,)
    },
    OnScroll(){
      var rightOffSet = event.target.scrollTop
      console.log(rightOffSet)

      var allElements = this.$refs.block
      for(var index =0;index < allElements.length;index++){
        var selectElement = allElements[index]
        var nextElement = allElements[index+1]
        if(rightOffSet>selectElement.offsetTop && rightOffSet<nextElement.offsetTop){
          this.$store.dispatch('CHANGE_ACTIVE',index)
        }
      }
    },
    OnTouchStart(){
      this.$refs.right.addEventListener('scroll',this.OnScroll)
    },
    AddCart(ele){
      var index = this.cartItems.findIndex((item)=>{
        return item.subcid === ele.subcid
      })
      if(index != -1){
        ele.count++
      }else {
        this.cartItems.push(ele)
      }
      console.log("数量",ele.count)
    },
    OnCart(){
      this.show = true
    },
    OnMinus(item){
      if(item.count > 0){
        item.count--
      }
    },
    OnPlus(item){
      item.count++
    }
    
  },
  mounted(){
      this.$store.dispatch('GET_CATEGORY')
      var rightElement = this.$refs.right
      rightElement.addEventListener('scroll',this.OnScroll)
  }
}
</script>

<style scoped>
  .home {
    width: 100%;
  }
  .home_header_container {
    width: 100%;
    height: 60px;
    font-size: 20px;
    background-color: #FFD161;
    color: black;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .home_main_container {
    width: 100%;
    height: 520px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
  }
  .home_main_left {
    width: 28%;
    height: 100%;
    border-right: 1px solid gray;
    overflow-y: scroll;
  }
  .left_slider_item_active {
    width: 95%;
    height: 50px;
    border-left: 3px solid red;
    background-color: #f5f5f5;
    color: red;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .left_slider_item {
    width: 95%;
    height: 50px;
    border-left: 3px solid #fff;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .home_main_right {
    width: 70%;
    height: 100%;
    overflow-y: scroll;

  }
  .right_block_container {
    width: 100%;
    /* border-bottom: 2px solid gray; */
  }
  .right_block_header {
    width: 100%;
    height: 40px;
    /* border-bottom: 1px solid gray; */
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 700;
  }
  .right_items_container {
    width: 100%;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
  .right_block_item {
    width: 33%;
    /* height: 150px; */
  }
  .right_block_message {
    width: 100%;
  }
  .right_block_price {
    color: red;
    font-size: 14px;
  }
  .right_block_to_cart {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: #FFD161;
    font-weight: 700;
    font-size: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .right_block_item img {
    width: 100%;
  }

  .home_bottom {
    width: 100%;
    height: 60px;
    background-color: #3B3B3C;
    position: fixed;
    left: 0;
    bottom: 0;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
  }
  .cart_button {
    width: 17%;
    height: 100%;
    border-radius: 80px;
    background-color: #FFD161;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .total_price {
    width: 50%;
    height: 100%;
    color: #fff;
    font-size: 24px;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
  }
  .and_price {
    width: 28%;
    height: 100%;
    background-color: #FFD161;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .content {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
  }
  .content_wrapper {
    width: 96%;
    height: 400px;
    overflow-y: scroll;
  }
  .cart_item_container {
    width: 100%;
    height: 80px;
    border-bottom: 1px solid gray;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .cart_item_name {
    width: 30%;
    height: 100%;
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
  }
  .cart_item_price {
    width: 36%;
    height: 100%;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 20px;
    color: red;
  }
  .cart_item_count {
    width: 30%;
    height: 100%;
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
  }
  .cart_item_count div{
    width: 30px;
    height: 30px;
    border: 1px solid gray;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
  }
  .cart_item_count .count {
    width: 50px;
  }


</style>
